{# The three destinations that exist in a fresh project. Every card
   links somewhere real — nothing here is a placeholder. #}
<section id="next" class="pb-24 border-t border-aegis-border pt-14">
  <h2 class="text-xxs uppercase tracking-widest text-aegis-muted">Where to go next</h2>

  <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
    <a href="/docs"
       class="group border border-aegis-border rounded-lg p-5 hover:border-aegis-teal/60 transition-colors">
      <div class="text-sm font-medium text-white">API docs</div>
      <p class="mt-2 text-xs text-aegis-muted leading-relaxed">
        Every route this project serves, generated from the code itself and
        interactive: send a request without leaving the page.
      </p>
      <div class="mt-4 text-xxs text-aegis-muted group-hover:text-aegis-teal transition-colors">
        /docs →
      </div>
    </a>

    <a href="/health"
       class="group border border-aegis-border rounded-lg p-5 hover:border-aegis-teal/60 transition-colors">
      <div class="text-sm font-medium text-white">Health</div>
      <p class="mt-2 text-xs text-aegis-muted leading-relaxed">
        Live status for each component in the stack you picked, with the
        detail behind every check.
      </p>
      <div class="mt-4 text-xxs text-aegis-muted group-hover:text-aegis-teal transition-colors">
        /health →
      </div>
    </a>

    <a href="https://docs.aegis-stack.io" target="_blank" rel="noopener"
       class="group border border-aegis-border rounded-lg p-5 hover:border-aegis-teal/60 transition-colors">
      <div class="text-sm font-medium text-white">Aegis Stack docs</div>
      <p class="mt-2 text-xs text-aegis-muted leading-relaxed">
        How the components fit together, and how to add more. Setup and the
        commands for this project live in its README.
      </p>
      <div class="mt-4 text-xxs text-aegis-muted group-hover:text-aegis-teal transition-colors">
        docs.aegis-stack.io →
      </div>
    </a>
  </div>
</section>